﻿<html lang="en"><head>
	<meta charset="UTF-8">
	<title>五子棋</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.gobang{
			margin:10px auto;
			width:401px;
			height: 401px;
			/*border:1px solid;*/
			background: url(background.gif);
			overflow: hidden;
		}
		.text{
			margin:0 auto;
			width:100px;
			height:40px;
			text-align: center;
			color:#0f0;
			border:1px solid white;
			line-height: 40px;
			display: block;
		}
		#can{
			margin:0px auto;
			border:1px solid green;
			display: block;
		}
		#messageContent{
				width: 400px;
				height: 500px;
		}
	</style>
	<style type="text/css">
			body{
				margin: 0px;
			}
			.bg{
				position: fixed;
				left: 0px;
				top: 0px;
				background: #fbc;
				width: 100%;
				height: 100%;
				opacity: 1;
			}
			.tankuang{
				position: relative;
				background: #cde;
				width: 200px;
				height: 200px;
				border-radius: 5px;
				margin: 5% auto;
			}
			#header{
				height: 40px;
			}
			#header-right{
				position: absolute;
				width: 50px;
				height: 25px;
				border-radius: 5px;
				background: red;
				color: #fff;
				right: 80px;
				top: 80px;
				text-align: center;
			}
		</style>
	<script type="text/javascript" src="../js/jquery-1.12.3.min.js" ></script>
	<script type="text/javascript" src="../js/json2.js" ></script>
</head>
	<body>
		<div id="header" style="background-color:#654321;">
			<h1 style="margin-bottom:0;">FIVE IN ROW</h1>
		</div>
		<div style="width:400;height:500;float:left"></div>
		<div class="message" style="width:400;height:500px;float:left;">
			<textarea id="messageContent" disabled="disabled" readonly="readonly" ></textarea>
		</div>
		<div id="gameResult" style="height:50px;font-size:xx-large"></div>
		<div class="gobang" style="width:401px;height:401px;float:left">
			<canvas id="can" width="401" height="401">
			您的浏览器不支持canvas
			</canvas>
		</div>
		<div id="fightUsr" style="height:200px;width:400px;float:left;font-style:italic;">没有正在进行的对战</div>
		<div class="bg" id='bg'>
			<div class="tankuang">
				<div id="header">
					<span style="height:20px;color:fuchsia">填一个用户名⑧</span>
					<input id="usr" type="text" name="username" style="height:30px;width:200px">
					<div id="header-right" onclick="submit()">提交</div>
				</div>
			</div>
		</div>
		<div class="bg" id='again' style="display:none">
			<div class="tankuang" style="opacity:1;">
				<div id="header">
					<span style="height:20px;color:fuchsia">游戏结束</span>
					<div id="header-right" onclick="again()" style="width:100px;">再来一次？</div>
				</div>
			</div>
		</div>
	<script>
		var text = document.getElementsByClassName('text');	
		//定义二维数组作为棋盘
		var maps = new Array(10);
		var len = maps.length;
		//初始化二维数组
		for(var i=0;i<len;i++){
			maps[i] = new Array();
			for(var j = 0;j<len;j++){
				maps[i][j] = 0;
			}
		}
	
		
	
		//初始化棋子
		var black = new Image();
		var white = new Image();
		var clientWidth = document.documentElement.clientWidth;
		black.src = "blackStone.gif";
		white.src = "whiteStone.gif";
		
		//棋盘初始化
		var can = document.getElementById('can');
		//获取该canvas的2D绘图环境对象
		var board = can.getContext("2d");
		//设置棋盘线条颜色 
		board.strokeStyle = "black";
		//绘制棋盘
		for(var m=0;m<len-1;m++){
			for(var n=0;n<len-1;n++){
				board.strokeRect(m*40+20,n*40+20,40,40);  //绘制40的小正方形
			}
		}
		
		
		var gameResult = document.getElementById("gameResult");
		
		var fightUsr = document.getElementById("fightUsr");
		document.getElementById('bg').style.display="none";
		document.getElementById('bg').style.display="";
		function submit(){
			document.getElementById('bg').style.display="none";
			username = document.getElementById("usr").value;
			$("#messageContent").append("你的用户名:"+username+"\n");
			var result = {};
			result.msgtype = "username";
			result.message = username;
			ws.send(JSON.stringify(result));
		}
			
		
		
			
		
	
		var ws = new WebSocket("ws://"+window.location.host+"/FiveInRow/webSever");
		
		
		var permit = false; //当前是否允许下子
		var isBlack = false; //该玩家持有什么颜色的棋子
		var isWhite = false
		//下子
		can.onclick=function play(e){
			if(permit){
				//获取棋盘偏移量
				var l = this.offsetLeft+20;
				var t = this.offsetTop+20;
				//获取点击相对棋盘坐标
				var x =e.clientX - l;
				var y = e.clientY -t;
				// alert(x);
				var row,col,index = 0;
		
				if(x%40 < 20){
					col = parseInt(x/40);
				}else{
					col = parseInt(x/40)+1;
				}
				row = y%40<20 ? parseInt(y/40) : parseInt(y/40)+1;
				// alert(row+"行"+col+"行");  //第几列行第几列
				
				if(maps[row][col]===0){
					permit = false;
					if(isBlack){
						board.drawImage(black,col*40,row*40);   //下黑子
						maps[row][col] = 2; //黑子为2
						var result = {};
						if(iswin(2,row,col)){
							$("#messageContent").append("游戏结束！你赢了!\n");
						}else{
							$("#messageContent").append("现在是对手的回合!(白棋)\n");
						}
						result.msgtype = "play";
						result.x=row;
						result.y=col;
						result.color="black"
						ws.send(JSON.stringify(result));
					}
					if(isWhite){
						board.drawImage(white,col*40,row*40);
						maps[row][col] = 1; //白子为1
						var result = {};
						if(iswin(1,row,col)){
							$("#messageContent").append("游戏结束！你赢了!\n");
						}else{
							$("#messageContent").append("现在是对手的回合!(黑棋)\n");
						}
						result.msgtype = "play";
						result.x=row;
						result.y=col;
						result.color="white"
						ws.send(JSON.stringify(result));	
					}
					
				}
			}
			
		}
		
		function iswin(t,row,col){
				var orgrow,orgcol,total;
				reset();
				// alert(total);
				//判断每行是否有五个
				while(col>0 &&maps[row][col-1]==t){  //当前子左边还有
					total++;
					col--;
					
				};
				row = orgrow;
				col = orgcol;
				while(col+1<16 &&maps[row][col+1]==t){  //当前子右边还有
					col++;
					total++;
				};
				if(celebrate())
					return true;
				
				
				//判断每列是否有五个
				reset();
	
				while(row>0&&maps[row-1][col]==t){   //当前子上面还有
					total++;
					row--;
				}
				row = orgrow;
				col = orgcol;
				while(row+1<16&&maps[row+1][col]==t){  //下面
					total++;
					row++;
				}
				if(celebrate())
					return true;
	
				//左上 右下有没有五个
				reset();
				while(row>0&&col>0&&maps[row-1][col-1]==t){ //左上1
					row--;
					col--;
					total++;
				}
				row = orgrow;
				col = orgcol;
				while(row+1<16&&col+1<16&&maps[row+1][col+1]==t){  //右下1
					row++;
					col++;
					total++;
				}
				if(celebrate())
					return true;
	
				//左下 右上有没有五个
				reset();
				while(row>0&&col+1<16&&maps[row-1][col+1]==t){  //右上
					row--;
					col++;
					total++;
				}
				row = orgrow;
				col = orgcol;
				while(row+1<16&&col>0&&maps[row+1][col-1]==t){   //左下
					row++;
					col--;
					total++;
				}
				if(celebrate())
					return true;
					
				return false;
				function celebrate(){       //显示哪边赢
					if(total>=5){
							if(t==1){
								gameResult.style.color="#ff0000";
								gameResult.innerText=">>>白棋胜利!<<<";
							}else{
								gameResult.style.color="#ff0000";
								gameResult.innerText=">>>黑棋胜利!<<<";
							}
							document.getElementById("again").style.opacity=0.5;
							document.getElementById("again").style.display="";
							return true;
					}
					return false;
				}
				function reset(){
					 orgrow = row;
					 orgcol = col;
					 total = 1;
				}
		}
		
		function again(){
			isBlack = false;
			isWhite = false;
			permit = false;
			fightUsr.innerText="没有正在进行的对战";
			gameResult.innerText="";
			document.getElementById("again").style.display="none";
			//给canvas重新赋值,可以起到清除画布的效果
			can.height = can.height;
			for(var m=0;m<len-1;m++){
				for(var n=0;n<len-1;n++){
					board.strokeRect(m*40+20,n*40+20,40,40);  //绘制40的小正方形
					maps[m][n] = 0;
				}
			}
			var result = {};
			result.msgtype = "end";
			ws.send(JSON.stringify(result));
		}
		
		
		ws.onopen = function(){
			$("#messageContent").append("已成功连接到服务器："+window.location.host+"\n");
		}
		ws.onerror = function(){
			$("#messageContent").append("连接到服务器失败!\n");
		}
		ws.onmessage = function(){
			var result = JSON.parse(event.data);
	        $("#messageContent").append(result.message);
			if(result.msgtype == "start"){
				permit = result.permit;
				fightUsr.innerText = result.usrname;
				if(result.color == "black"){
					isBlack = true;
				}else{
					isWhite = true;
				}
			}else if(result.msgtype == "play"){
				var x = result.x;
				var y = result.y;
				if(isBlack){
					board.drawImage(white,y*40,x*40);   //下白子
					maps[x][y] = 1; //白子为1
					if(iswin(1,x,y)){
						$("#messageContent").append("游戏结束!你输了！\n");
					}else{
						permit = true;
						$("#messageContent").append("现在是你的回合!(黑棋)\n");
					}
				}
				if(isWhite){
					board.drawImage(black,y*40,x*40);   //下黑子
					maps[x][y] = 2; //黑子为2
					if(iswin(2,x,y)){
						$("#messageContent").append("游戏结束!你输了！\n");
					}else{
						permit = true;
						$("#messageContent").append("现在是你的回合!(白棋)\n");
					}
				}
				
			}else if(result.msgtype == "opponentquit"){
				again();
			}
		}
		//连接关闭的回调方法
      	ws.onclose = function(){
      	};
      	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      	ws.onbeforeunload = function(){
        	  websocket.close();
      	};
	</script>
</body></html>